<template>
  <nav class="navbar">
    <div class="container">
      <div class="navbar-content">
        <router-link to="/dashboard" class="navbar-brand">
          Flask Vue 认证系统
        </router-link>
        
        <ul class="navbar-nav">
          <li>
            <router-link to="/dashboard">仪表板</router-link>
          </li>
          <li>
            <router-link to="/profile">个人资料</router-link>
          </li>
        </ul>
        
        <div class="user-info">
          <div class="user-avatar">
            {{ userInitials }}
          </div>
          <div class="user-details">
            <div class="username">{{ userInfo?.username }}</div>
            <div class="user-id">ID: {{ userInfo?.user_id }}</div>
          </div>
          <button @click="handleLogout" class="btn btn-danger" :disabled="loading">
            {{ loading ? '退出中...' : '退出登录' }}
          </button>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'

export default {
  name: 'NavBar',
  setup() {
    const router = useRouter()
    const authStore = useAuthStore()
    
    const userInfo = computed(() => authStore.userInfo)
    const loading = computed(() => authStore.loading)
    
    const userInitials = computed(() => {
      if (userInfo.value?.username) {
        return userInfo.value.username.charAt(0).toUpperCase()
      }
      return 'U'
    })
    
    const handleLogout = async () => {
      await authStore.logout()
      router.push('/login')
    }
    
    return {
      userInfo,
      loading,
      userInitials,
      handleLogout
    }
  }
}
</script>

<style scoped>
.user-details {
  text-align: left;
}

.username {
  font-weight: 600;
  color: #333;
}

.user-id {
  font-size: 12px;
  color: #666;
}

@media (max-width: 768px) {
  .user-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .user-details {
    text-align: center;
  }
}
</style>
